<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			 .red{background-color: red;width: 100px;height: 100px;}
			 .blue{background-color: blue;width: 100px;height: 100px;}
		</style>
	</head>
	<body>
		 <div id="app">
			 
			 <!-- a标签的属性绑定，给href动态赋值
			 语法：v-bind:href="vue中的属性"-->
			<!-- <a v-bind:href="url">百度</a> 其中的v-bind:可以简化为: -->
			<a :href="url">百度</a><!-- 简化版 -->
			<hr >
			<!-- 2.class类型绑定 -->
			<div :class="colorClass">class类型绑定</div>
			<hr >
			<!-- 3.属性切换 --><!-- 用true,false,左侧是css里class类型名称,不能写colorClass -->
			<div :class="{red:true}">class类型绑定</div>
			<hr>
			<div :class="{red:flag}">class类型绑定</div>
			<button @click="flag = !flag">变换</button>
			<!-- 小结:如果要切换样式: :class="colorClass";
			如果要是否显示::class="{red:flag}"-->
		 </div>
		 <!-- 1.导入js文件-->
		 <script src="../js/vue.js"> </script>
		 <!-- 3.创建vue对象-->
		 <script>
			 /* 语法
			 1.const---特点：定义常量的
			 2.let---特点：作用和var类似，有作用域的概念
			 3.var----特点：没有作用域
			 */
			const APP =new Vue({
				
				el: "#app",
				data: {
					url:"http://www.baidu.com",
					colorClass:"blue",
					flag:true
					
					
				},
				
			})
		 </script>
	</body>
</html>
